<template>
  <div class="swiper-page">
    <div class="item">
      <div class="group">
        <b-swiper :height="184" class="swiper" v-model="swiper1">
          <b-swiper-item class="list1">
            <img src="../assets/img/swiper/swiper1.png" alt />
          </b-swiper-item>
          <b-swiper-item class="list2">
            <img src="../assets/img/swiper/swiper2.png" alt />
          </b-swiper-item>
          <b-swiper-item class="list3">
            <img src="../assets/img/swiper/swiper3.png" alt />
          </b-swiper-item>
          <b-swiper-item class="list4">
            <img src="../assets/img/swiper/swiper4.png" alt />
          </b-swiper-item>
        </b-swiper>
        <p class="showSwiper">{{swiper1}}</p>
      </div>
      <div class="group">
        <b-swiper
          :height="200"
          class="swiper"
          trigger="hover"
          v-model="swiper2"
          dots-active-color="red"
          dots-base-color="var(--info)"
          dots="outside"
          circle-dots
        >
          <b-swiper-item class="list">1</b-swiper-item>
          <b-swiper-item class="list">2</b-swiper-item>
          <b-swiper-item class="list">3</b-swiper-item>
          <b-swiper-item class="list">4</b-swiper-item>
        </b-swiper>
        <p class="showSwiper">{{swiper2}}</p>
      </div>
    </div>

    <hr/>
    <div class="item">
      <b-swiper :height="240">
        <b-swiper-item class="list1">1</b-swiper-item>
        <b-swiper-item class="list2">2</b-swiper-item>
        <b-swiper-item class="list3">3</b-swiper-item>
        <b-swiper-item class="list4">4</b-swiper-item>
        <b-swiper-item class="list3">5</b-swiper-item>
        <b-swiper-item class="list4">6</b-swiper-item>
      </b-swiper>
    </div>
  </div>
</template>
<script>
export default {
  name: "SwiperPage",
  data() {
    return {
      swiper1: 0,
      swiper2: 2,
    };
  },
};
</script>
<style scoped>
[class*="list"] {
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #506b9e;
  color: #fff;
}
.list1{
    background: #506b9e;
  border: 1px solid #506b9e;
}
.list2{
  background: red;
  border: 1px solid red;
}
.list3{
  background: var(--primary);
  border: 1px solid var(--primary);
}
.list4{
  background: var(--joker);
  border: 1px solid var(--joker);
}
.swiper {
  margin-top: 40px;
}
.showSwiper{
  text-align: center;
}
.item {
  display: flex;
  justify-content: center;
}
.group {
  flex: 1;
}
</style>